import { useRecoilValueLoadable, useSetRecoilState, useRecoilValue } from "recoil";
import { stuListStateSelector, search, alertInfo } from "../store";
import { useState } from "react";
import { NavLink } from "react-router-dom";
import Alert from "../components/Alert";

function Home() {
  // 获取学生列表
  // 注意这里的 stuListLoadable 是一个对象，里面有两个属性
  // state 和 contents
  const stuListLoadable = useRecoilValueLoadable(stuListStateSelector);

  // 输入框单独维护一个本地状态
  const [searchItem, setSearchItem] = useState("");

  // 读取搜索框的值
  const setSearchValue = useSetRecoilState(search);

  // 获取 alert 的状态值
  const alert = useRecoilValue(alertInfo);

  // 根据 alert 的状态值来决定是否显示 alert
  const showAlert = alert.message ? <Alert {...alert}/> : null;

  // 在下面我就可以根据当前 stuListLoadable 的状态来显示不同的内容
  switch (stuListLoadable.state) {
    case "hasValue": {
      // 说明已经被解析了，有数据了，可以进行渲染

      // 在进行表格渲染之前，我们需要拼接一下表格的数据
      const stuList = stuListLoadable.contents;
      const trs = stuList.map((item, index) => {
        return (
          <tr key={index}>
            <td>{item.stuname}</td>
            <td>{item.stuage}</td>
            <td>{item.phone}</td>
            <td>
              <NavLink to={`/detail/${item._id}`}>详情</NavLink>
            </td>
          </tr>
        );
      });
      return (
        <div>
          {showAlert}
          <h1>学生管理系统</h1>
          {/* 搜索框 */}
          <div className="form-group" style={{ display: "flex", width: "50%" }}>
            <input
              type="text"
              placeholder="请输入搜索内容"
              className="form-control"
              value={searchItem}
              onChange={(e)=>setSearchItem(e.target.value)}
            />
            <button 
              className="btn btn-default" 
              style={{ marginLeft: "15px" }}
              onClick={()=>setSearchValue(searchItem)}
            >
              搜索
            </button>
          </div>
          {/* 表格显示学生数据 */}
          <table className="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>联系方式</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>{trs}</tbody>
          </table>
        </div>
      );
    }
    case "loading": {
      // 说明正在加载中，可以显示一个 loading
      return <div>加载中...</div>;
    }
  }
}

export default Home;
